import React, { useEffect, useState } from 'react';
import { Space, Table, Tag, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { yewutable_list } from '../../api/yewutable';
import './Zhuti.scss'
import { useNavigate } from 'react-router-dom';
interface Props { }
interface DataType {
  key: any;
  name: string;
  sector: string;
  address: string;
  tags: string[];
  id: string;
}


const data: DataType[] = [
  {
    key: '1',
    id: '123',
    name: '城乡居民养老登记',
    address: '陕西省',
    sector: '陕西省人力资源局',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    id: '124',
    name: '职工领取待遇资格认证',
    address: '陕西省',
    sector: '陕西省人力资源局',
    tags: ['loser'],
  },
  {
    key: '3',
    id: '125',
    name: '开户籍证明',
    address: '陕西省',
    sector: '陕西省人力资源局',
    tags: ['cool', 'teacher'],
  },
];
function Zhuti(props: Props) {
  var [data, setData] = useState([])
  const list = [
    '全部业务',
    '生育收养',
    '户籍办理',
    '民族宗教',
    '教育科研',
    '入伍服役',
    '就业创业',
    '设立变更',
    '准营准办',
    '抵押质押',
    '职业资格',
    '行政缴费',
    '婚姻登记',
    '优待抚恤',
    '规划建设',
    '住房保障',
    '社会保障',
    '证件办理',
    '交通出行',
    '旅游观光',
    '出境入境',
    '职业资格',
    '行政缴费',
    '婚姻登记',
    '优待抚恤',
  ]
  var navigate = useNavigate()
  //========拿到表格
  var yewu = async () => {
    var res = await yewutable_list()
    console.log(res.data)
    var shuzu = res.data.map((item: any, index: any) => {
      return {
        ...item,
        key: index
      }
    })
    setData(shuzu)
  }

  // =============生命周期
  useEffect(() => {
    yewu()
  }, [])


  //======表格头
  const columns: ColumnsType<DataType> = [
    {
      title: '实施事项名称',
      dataIndex: 'yewuname',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '主管部门',
      dataIndex: 'yewusecort',
      key: 'age',
    },
    {
      title: '行政区',
      dataIndex: 'yewuaddress',
      key: 'address',
    },

    {
      title: '操作',
      key: 'yewuaction',
      render: (_, record: any) => (
        <Space size="middle">
          <Button onClick={() => { navigate('/detail/' + record.yewuid) }}   >查看详情</Button>
        </Space>
      ),
    },
  ];
  //======
  return (
    <div className='zhuti'>
      <div className='zhutishang'>
        {
          list.map((item, index) => {
            return (<div>{item}</div>)
          })
        }
      </div>
      <div className='zhutixia'>
        <p className='zhutixiayi'><span>事项列表</span></p>
        <Table columns={columns} dataSource={data} />
      </div>
    </div>
  );
}

export default Zhuti;